<script setup>
import { reactive, ref } from 'vue'
import addressData from '@/assets/js/address'
import { ElMessage } from 'element-plus'
import { memberAddress, memberAddressId } from '@/api/address'
const sta = ref(0)
const visible = ref(false)

const form = ref()
const formData = ref({
  receiver: '',
  contact: '',
  provinceCode: '',
  cityCode: '',
  countyCode: '',
  address: '',
  postalCode: '',
  addressTags: '',
  isDefault: '1'
})

const rules = reactive({
  receiver: [
    {
      required: true,
      message: '请输入收货人',
      trigger: 'blur'
    }
  ],
  contact: [
    {
      required: true,
      message: '请输入联系方式',
      trigger: 'blur'
    },
    {
      validator: (rule, value, callback) => {
        const phoneRegex = /^1[3-9]\d{9}$/
        if (!phoneRegex.test(value)) {
          callback(new Error('请输入正确的手机号码'))
        } else {
          callback()
        }
      },
      message: '请输入正确的联系方式',
      trigger: 'blur'
    }
  ],
  address: [
    {
      required: true,
      message: '请输入详细地址',
      trigger: 'blur'
    }
  ]
})
const closeE = () => {
  form.value.resetFields()
  formData.value = {
    receiver: '',
    contact: '',
    provinceCode: '',
    cityCode: '',
    countyCode: '',
    address: '',
    postalCode: '',
    addressTags: '',
    isDefault: ''
  }
  addName.value = ''
  addShow.value = false
  step = 0
  visible.value = false
  addData.value=addressData
}

const emit = defineEmits(['getDataE'])
const submitE = () => {
  form.value.validate(async res => {
    if (res) {
      if (sta.value === 0) {
        await memberAddress(formData.value)
        ElMessage.success('添加成功')
      } else {
        await memberAddressId(id.value, formData.value)
        ElMessage.success('修改成功')
      }
      emit('getDataE')
      visible.value = false
      
    }
  })
}
//地址处理
const addData = ref(addressData)
const addShow = ref(false)
const getPlace = () => {
  addShow.value = true;
  addData.value = addressData;
  step = 0;
  addName.value = '';
}
const addName = ref('')
let step = 0
const setCode = item => {
  if (step === 0) {
    formData.value.provinceCode = item.code;
    addName.value = item.name; 
    addData.value = item.areaList;
    step++;
  } else if (step === 1) {
    formData.value.cityCode = item.code;
    addName.value = `${addName.value} ${item.name}`; 
    addData.value = item.areaList;
    step++;
  } else if (step === 2) {
    formData.value.countyCode = item.code;
    addName.value = `${addName.value} ${item.name}`; 
    step = 0;
    addShow.value = false;
  }
};
const setInitPlace = () => {
  if (sta.value === 1) {
    addData.value = addressData
    addName.value = ''
    const tempD = [formData.value.provinceCode, formData.value.cityCode, formData.value.countyCode]
    console.log(formData.value.provinceCode, formData.value.cityCode, formData.value.countyCode)
    console.log(addData.value)
    for (let i = 0; i < 3; i++) {
      const t = addData.value.find(item => {
        return tempD[i] === item.code
      })

      addName.value += t.name + '  '
      addData.value = t.areaList
    }
    addData.value = addressData
    step = 0
    console.log(addName.value)
    console.log(addData.value)
  }
}
const id = ref()
defineExpose({ visible, sta, formData, setInitPlace, id })
</script>
<template>
  <div class="addAddress-page">
    <el-dialog
      v-model="visible"
      :title="sta === 0 ? '新增收货地址' : '修改收货地址'"
      width="800"
      @close="closeE"
    >
      <div class="main">
        <el-form label-width="auto" class="form" :model="formData" :rules="rules" ref="form">
          <el-form-item label="收货人：" prop="receiver"
            ><el-input placeholder="请输入收货人" v-model="formData.receiver"></el-input
          ></el-form-item>
          <el-form-item label="手机号：" prop="contact"
            ><el-input placeholder="请输入手机号" v-model="formData.contact"></el-input
          ></el-form-item>
          <el-form-item label="地区："
            ><el-input
              v-model="addName"
              placeholder="请选择所在地区"
              :readonly="true"
              @click="getPlace"
            ></el-input>
            <div class="place" v-if="addShow">
              <div v-for="item in addData" :key="item.code" class="item" @click="setCode(item)">
                {{ item.name }}
              </div>
            </div>
          </el-form-item>
          <el-form-item label="详细地址：" prop="address"
            ><el-input placeholder="请输入详细地址" v-model="formData.address"></el-input
          ></el-form-item>
          <el-form-item label="邮政编码：" prop="postalCode"
            ><el-input placeholder="请输入邮政编码" v-model="formData.postalCode"></el-input
          ></el-form-item>
          <el-form-item label="地址标签：" prop="addressTags"
            ><el-input
              placeholder="请输入地址标签，逗号分隔"
              v-model="formData.addressTags"
            ></el-input
          ></el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            @click="visible = false"
            style="width: 180px; height: 60px; background-color: #cccccc; color: white"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="submitE"
            style="width: 180px; height: 60px; background-color: #27ba9b; color: white"
          >
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
.addAddress-page {
  .main {
    border-top: 1px #f5f5f5 solid;
    position: relative;
    .place {
      box-sizing: border-box;
      padding: 10px;
      background-color: #fff;
      z-index: 2;
      position: absolute;
      top: 49px;
      right: -93px;
      width: 550px;
      border: 1px solid #f5f5f5;
      .item {
        display: inline-block;
        text-align: center;
        line-height: 20px;
        width: 115px;
        height: 20px;
        &:hover {
          background-color: #f5f5f5;
        }
      }
    }
    form {
      padding-top: 20px;
      width: 500px;
      margin: 0 auto;
      .el-input {
        height: 50px;
      }
      :deep() {
        .el-form-item__label {
          margin-top: 8px;
        }
      }
    }
  }
  .dialog-footer {
    text-align: center;
  }
}
</style>
